<template>
  <div class="bw-design-base-info">
    <a-tabs v-bind="tabsOptions" v-model:activeKey="activeKey">
      <template #rightExtra>
        <a-tooltip placement="top" title="关闭">
          <Icon
            class="bw-close-icon"
            icon="ant-design:close-outlined"
            @click="onCloseCode"
          />
        </a-tooltip>
      </template>

      <a-tab-pane key="props" tab="外放属性">
        <BwProps />
      </a-tab-pane>

      <a-tab-pane key="emits" tab="外放事件">
        <BwEmits />
      </a-tab-pane>

      <a-tab-pane key="slots" tab="外放插槽">
        <BwSlots />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
import { useBaseInfo } from './util'

import BwEmits from './coms/emits/index.vue'
import BwProps from './coms/props/index.vue'
import BwSlots from './coms/slots/index.vue'

const emit = defineEmits(['close'])
const { activeKey, tabsOptions, onCloseCode } = useBaseInfo(emit)
</script>

<style lang="less" scoped>
.bw-design-base-info {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 24px;
  overflow: auto;

  .bw-close-icon {
    margin-right: 5px;
  }
}
</style>
